<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>可视化数据查询</title>
    <meta content="widtd=device-widtd, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <meta http-equiv="Access-Control-Allow-Origin" content="http://www.sousung.com/">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="bootstrap/css/font-awesome.min.css">
    <!-- tdeme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.css">
    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
    <link rel="stylesheet" href="dist/css/custom/app.css">
    <!--流程图-->
    <link rel="stylesheet" type="text/css" href="dist/module/flow-chart-manage/css/jsplumb.css"/>
    <link rel="stylesheet" type="text/css" href="dist/module/flow-chart-manage/css/mynode.css"/>
    <link rel="stylesheet" type="text/css" href="dist/module/flow-chart-manage/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap-multiselect/bootstrap-select.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css"/>
    <link href="https://cdn.bootcss.com/TableExport/5.0.2/css/tableexport.min.css" rel="stylesheet">


    <!-- jQuery 2.2.3 -->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
    <script src="plugins/jQuery/ajaxfileupload.js"></script>
    <script src="plugins/template/template.js"></script>


    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="plugins/bootstrap-multiselect/bootstrap-select.js"></script>
    <script src="plugins/bootstrap-table/bootstrap-table.js"></script>


    <script src="plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script src="plugins/bootstrap-table/bootstrap-table-export.js"></script>
    <script src="plugins/bootstrap-table/tableExport.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.js"></script>
    <!-- AdminLTE App -->

</head>
<body>
<div>
    <div id="toolbar_xmdm" class="btn-group">
        <select id="sel_exportoption" class="form-control">
            <option value="">导出当前页面数据</option>
            <option value="all">导出全部数据</option>
            <option value="selected">导出选中数据</option>
        </select>
    </div>
    <table id="realTime_Table" data-show-export="true" data-export-types="['excel']" ></table>
</div>
</body>



<script>

//    $(function () {
//        var option = {
//            url: "http://www.sousung.com/chart/chartRun",
//            method: 'post',
//            search: true,
//            pageNumber: 1, //初始化加载第一页，默认第一页
//            pagination: true,//是否分页
//            showPaginationSwitch: false,
////        queryParamsType: 'limit',//查询参数组织方式
////        sidePagination: 'server',//指定服务器端分页
//            pageSize: 10,//单页记录数
//            showRefresh: true,
//            //showToggle: true,
//            locale: "zh-CN",
//            striped: true,
//            columns: [
//
//                {field: "zjhm", title: "证件号码"},
//                {field: "xm100", title: "姓名"},
//                {field: "xbid", title: "xbid"}
//            ],
//            queryParams: queryParams,//请求服务器时所传的参数
//            responseHandler: function (res) {
////                $("#sql").html("SQL:" + res.response.sql).hide();
////                //在ajax获取到数据，渲染表格之前，修改数据源
////                $("#data-table").show();
////                $(".pagination-detail").css("background-color", "yellow");
//                console.log(res.response.data);
//                return res.response.data;
//            },
//            showExport: true,  //是否显示导出按钮
//            buttonsAlign: "right",  //按钮位置
//            exportDataType: "all",
//            exportTypes: ['csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型
//            Icons: 'glyphicon-export',
//            exportOptions: {
//                ignoreColumn: [0, 1],  //忽略某一列的索引
//                fileName: '312312',  //文件名称设置
//                worksheetName: 'sheet1',  //表格工作区名称
//                tableName: '12312312321',
//                excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//                onMsoNumberFormat: DoOnMsoNumberFormat
//            },
//        }
//        //2.初始化select的change事件
//        $("#sel_exportoption").change(function () {
//            $('#table_xmdm').bootstrapTable('refreshOptions', {
//                exportDataType: $(this).val()
//            });
//
//        });
////        var option = {
////            method: 'POST',
////            dataType: 'json',
////            contentType: "application/x-www-form-urlencoded",
////            cache: false,
////            toolbar: $("#toolbar_xmdm"),
////            striped: true,                              //是否显示行间隔色
////            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
////            showColumns: true,
////            pagination: true,
////            minimumCountColumns: 2,
////            pageNumber: 1,                       //初始化加载第一页，默认第一页
////            pageSize: 20,                       //每页的记录行数（*）
////            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
////            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
////            showExport: true,
////            exportDataType: 'basic',
////            exportTypes: ['csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型
////            columns: [{
////                field: 'id',
////                title: 'Item ID'
////            }, {
////                field: 'name',
////                title: 'Item Name'
////            }, {
////                field: 'price',
////                title: 'Item Price'
////            }],
////            data: [{
////                id: 1,
////                name: '项目 1',
////                price: '价格$1'
////            }, {
////                id: 2,
////                name: '项目 2',
////                price: '价格$2'
////            }]
////        }
//
//        function DoOnMsoNumberFormat(cell, row, col) {
//            var result = "";
//            if (row > 0 && col == 0)
//                result = "\\@";
//            return result;
//        }
//
//        //请求服务数据时所传参数 获取数据的方法
//        function queryParams(params) {
//            return {
//                "chart_id": "1808211727316144651",
//                "node_id": "02011534843593000346"
//            }
//        }
//
//        $("#realTime_Table").bootstrapTable(option);
//    })

        function doExport(selector, params) {
            var options = {
                //ignoreRow: [1,11,12,-2],
                //ignoreColumn: [0,-1],
                //pdfmake: {enabled: true},
                tableName: 'Table name'
            };

            jQuery.extend(true, options, params);

            $(selector).tableExport(options);
        }
</script>

</html>

